<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>抽奖</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no"/>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="toEat" class="app">
    <!-- 大转盘抽奖简易demo -->
    <lucky-wheel
            ref="myLucky"
            width="300px"
            height="300px"
            :prizes="prizes"
            :blocks="blocks"
            :buttons="buttons"
            @start="startCallback"
            @end="endCallback"
    />
</div>
<!-- 然后引入我提供的 CDN 链接 -->
<script src="https://unpkg.com/@vue/composition-api@1.2.4/dist/vue-composition-api.prod.js"></script>
<script src="https://unpkg.com/vue-demi@0.11.4"></script>
<script src="https://unpkg.com/@lucky-canvas/vue@0.1.11"></script>
<script>
    new Vue({
        el: '#toEat',
        data () {
            return {
                blocks: [{ padding: '13px', background: '#617df2' }],
                prizes: [

                ],
                buttons: [
                    { radius: '50px', background: '#617df2' },
                    { radius: '45px', background: '#afc8ff' },
                    {
                        radius: '40px', background: '#869cfa',
                        pointer: true,
                        fonts: [{ text: '开始\n抽奖', top: '-20px' }]
                    },
                ],
            }
        },
        created(){
            axios({
                url:"/query",
                method:'post',
                headers:{
                    'Authorization':localStorage.getItem("token")
                }
            }).then(res=>{
                this.prizes=res.data.data
            })

        },
        methods: {
            // 点击抽奖按钮会触发star回调
            startCallback () {
                let index=0;
                // 调用抽奖组件的play方法开始游戏
                this.$refs.myLucky.play()
                // 模拟调用接口异步抽奖
                axios({
                    url:"/prize",
                    method:'post',
                    headers:{
                        'Authorization':localStorage.getItem("token")
                    }
                }).then(res=>{
                    index= res.data.data
                }).catch(e=>{
                    alert("没有次数了!")
                    return;
                })
                setTimeout(() => {
                    // 假设后端返回的中奖索引是0
                    // 调用stop停止旋转并传递中奖索引
                    this.$refs.myLucky.stop(index)
                }, 3000)
            },
            // 抽奖结束会触发end回调
            endCallback (prize) {
                console.log(prize)
            },
        }
    })
</script>


</body>

</html>